<!DOCTYPE html>
<html lang="en" class="page-fill" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<title>添加目的地信息</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="/css/oksub.css">
	<script type="text/javascript" src="/lib/loading/okLoading.js"></script>
</head>
<body>
<div class="ok-body">
	<!--form表单-->
	<form class="layui-form layui-form-pane ok-form">
		<div class="layui-form-item">
			<label class="layui-form-label">名称</label>
			<div class="layui-input-block">
				<input type="text" name="name" placeholder="请输入名称" autocomplete="off" class="layui-input"
					   lay-verify="required">
			</div>
		</div>


		<div class="layui-form-item" id="area-picker">
			<div class="layui-form-label">所属位置</div>
			<div class="layui-input-inline" style="width: 200px;">
				<select name="province" class="province-selector" lay-filter="province" lay-verify="required" lay-search="true">
					<option value="">请选择省</option>
				</select>
			</div>
			<div class="layui-input-inline" style="width: 200px;">
				<select name="city" class="city-selector" lay-filter="city" lay-verify="required" lay-search="true">
					<option value="">请选择市</option>
				</select>
			</div>
			<div class="layui-input-inline" style="width: 200px;">
				<select name="area" class="county-selector" lay-filter="area" lay-verify="required" lay-search="true">
					<option value="">请选择区</option>
				</select>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">所属网点</label>
			<div class="layui-input-inline" style="width: 500px;">
				<select name="parentNetworkId" class="layui-select" lay-filter="parentNetworkId" lay-verify="required" lay-search="true" >
					<option value="">请选择网点</option>
					<option   th:each="net:${networks}" th:value="${net.networkId}"  th:text="${net.networkName}" />
				</select>
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">详细地址</label>
			<div class="layui-input-block">
				<input class="layui-input" id="address" lay-verify="required"
					   placeholder="请输入详细地址" name="address"/>
			</div>
		</div>

		<div class="layui-form-item layui-form-text">
			<label class="layui-form-label">目的地区域</label>
			<div class="layui-input-block">
				<input class="layui-input"  lay-verify="required"
					   placeholder="请输入目的地区域" name="destinationRegion"/>
			</div>
		</div>

		<div class="layui-form-item layui-form-text">
			<label class="layui-form-label">服务范围</label>
			<div class="layui-input-block">
				<textarea name="scopeService" placeholder="请输入内容" class="layui-textarea"></textarea>
			</div>
		</div>
		<div class="layui-form-item layui-form-text">
			<label class="layui-form-label">备注</label>
			<div class="layui-input-block">
				<textarea name="remarks" placeholder="请输入内容" class="layui-textarea"></textarea>
			</div>
		</div>

		<div class="layui-form-item">
			<div class="layui-input-block">
				<button class="layui-btn" lay-submit lay-filter="add">立即提交</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</div>
	</form>
</div>
<!--js逻辑-->
<script src="/lib/layui/layui.js"></script>
<script>


	//配置插件目录
	layui.config({
		base: '/lib/mods/'
		, version: '1.0'
	});
	//一般直接写在一个js文件中
	layui.use(['layer', 'form', 'layarea'], function () {
		var layer = layui.layer
				, form = layui.form
				, layarea = layui.layarea;

		layarea.render({
			elem: '#area-picker',
			change: function (res) {
				//选择结果
				console.log(res);
			}
		});
	});


	layui.use(["element", "form", "okLayer", "okUtils"], function () {
		var form = layui.form;
		var okLayer = layui.okLayer;
		var okUtils = layui.okUtils;
		okLoading.close();
		form.on("submit(add)", function (data) {
			okUtils.ajax("/api/dest/add", "post", data.field, true).done(function (response) {
				console.log(response);
				okLayer.greenTickMsg("添加成功", function () {
					parent.layer.close(parent.layer.getFrameIndex(window.name));
					layer.close(layer.index);
				});
			}).fail(function (error) {
				console.log(error)
			});
			return false;
		});
	});
</script>
</body>
</html>
